import React, { Component } from 'react'

// 受控组件  受到组件内部state控制的组件
export default class Input extends Component {
    state = {
        userName: "",
        passWord: "",
        flag: false,
        value: ""
    }
    render() {
        const { userName, passWord, flag, value } = this.state
        return (
            <div>
                {/* <p>
                    账号： <input type="text" value = { userName } onChange = {(ev) => {
                        // ev  事件对象
                        this.setState({
                            userName: ev.target.value
                        })
                    }} />
                </p>
                <p>
                    密码： <input type="text" value = { passWord } onChange = {(ev) => {
                        this.setState({
                            passWord: ev.target.value
                        })
                    }}/>
                </p> */}

                {/* <input checked = { flag } onChange = {(ev) => {
                    // ev.target   当前的节点
                    this.setState({
                        flag: ev.target.checked
                    })
                }} type="checkbox" /> */}

                {/* 单选 */}
                {/* <input checked type="radio" /> */}

                {/* 下拉框 */}
                {/* <select value = { value } onChange = {(ev) => {
                    this.setState({
                        value: ev.target.value
                    })
                }} name="" id="">
                    <option value="one">选项一</option>
                    <option value="two">选项二</option>
                </select> */}

                <p>
                    <button onClick = {() => {
                       console.log(this.state)
                    }}>登录</button>
                </p>
            </div>
        )
    }
}
